<template>
  <ul @click="handleClick">
    <li
      v-for="(item, index) in list"
      :key="index"
      :data-index="index"
      :class="{
        line: index + 1 !== list.length,
        active: item.active,
        disabled: item.disabled,
      }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    list: {
      type: Array,
      default: () => [
        { text: "测试1", active: true, disabled: false },
        { text: "测试2", active: true, disabled: false },
        { text: "测试3", active: false, disabled: false },
        { text: "测试4", active: false, disabled: false },
        { text: "测试5", active: false, disabled: true },
      ],
    },
  },
  methods: {
    handleClick(event) {
      let { index } = event.target.dataset;
      if (index === undefined) return;
      let { disabled } = this.list[index];
      if (disabled) return;
      this.$emit("click", { ...this.list[index], activeIndex: Number(index) });
    },
  },
};
</script>
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* margin-left: 100px; */
}
li {
  /* width: 200px; */
  height: 20px;
  position: relative;
  /* 点离文字的距离 */
  padding-left: 20px;
  color: #ccc;
  cursor: pointer;
}
li:not(.disabled):hover {
  color: rgb(0, 173, 116);
}
li:not(.disabled):hover::after {
  border-color: rgb(0, 173, 116);
}
li.disabled {
  cursor: not-allowed;
}
li.active {
  color: rgb(0, 173, 116);
  font-weight: bold;
}
li.line {
  margin-bottom: 50px;
}
li::after {
  position: absolute;
  content: "";
  /* 点半径 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* background-color: #ccc; */
  box-sizing: border-box;
  border: 2px solid #ccc;
  left: 0px;
  /* 点在li垂直高度中剧居中 (20-8)/2 px */
  top: 6px;
}
li.active::after {
  background-color: rgb(0, 173, 116);
  box-sizing: border-box;
  border: 2px solid rgb(0, 173, 116);
}
li.line::before {
  position: absolute;
  content: "";
  width: 2px;
  /* 和 li.line  margin-bottom: 50px;保持一致 */
  height: 50px;
  background-color: #ccc;
  top: 100%;
  /* 和点垂直对齐  （8-2）/2 */
  left: 3px;
}
li.line.active::before {
  background-color: rgb(0, 173, 116);
}
</style>
